<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../jquery/jquery-3.6.0.min.js"></script>
    <script src="city.js"></script>
</head>
<body>
    <select name="" id="sheng">
       <option value="">-省-</option>
    </select>
    <select name="" id="shi">
        <option value="">-市-</option>
    </select>
    <select name="" id="qu">
        <option value="">--区--</option>
    </select>
</body>
<script>
      var sheng=0
    $(function(){
        var html=''
         for(i in citys){
             html+=`<option value="${i}">${citys[i].name}</option>`
         }
           $('#sheng').append(html)

         $('#sheng').change(function(){
             $('#shi').html('<option value="">-市-</option>')
            var data=citys[$(this).val()].city
               console.log($(this).val());
            var html=''
              for(i in data){
                html+=`<option value="${i}">${data[i].name}</option>`
              }
              $('#shi').append(html)
              sheng=$(this).val()   
         })
         $('#shi').change(function(){
            $('#qu').html('<option value="">-区-</option>')
            var data=citys[sheng].city[$(this).val()].area
            var html=''
            for(i in data){
                html+=`<option value="${i}">${data[i]}</option>`
            }
            $('#qu').append(html)
         })
    })
</script>
</html>